<template>
  <scroll-view class="album_scroll" scroll-y @scrolltolower="handleToLower">
    <view class="swiper">
      <swiper autoplay indicator-dots circular>
        <swiper-item v-for="item in banner" :key="item.id">
          <image mode="" :src="item.thumb"></image>
        </swiper-item>
      </swiper>
    </view>
    <view class="list">
      <navigator :url="`/pages/album/index?id=${item.id}`" class="item" v-for="item in album" :key="item.id">
        <view class="item_img">
          <image :src="item.cover" mode="aspectFill"></image>
        </view>
        <view class="item_info">
          <view class="name">{{item.name}}</view>
          <view class="desc">{{item.desc}}</view>
          <view class="bth">
            <view class="attention">+ 关注</view>
          </view>
        </view>
      </navigator>
    </view>
  </scroll-view>
</template>

<script>
  export default {
    data() {
      return {
        params:{
          limit:30,
          order:"new",
          skip:0
        },
        banner:[],
        album:[],
        hasMore:true
      }
    },
    mounted() {
      this.getList()
      uni.setNavigationBarTitle({title:"专辑"})
    },
    methods: {
      handleToLower(){
        if (this.hasMore) {
          this.params.skip+=this.params.limit
          this.getList()
        }else{
          uni.showToast({
            title:"没有数据了",
            icon:"none"
          })
        }
      },
      getList(){
        this.request({
          url:"http://157.122.54.189:9088/image/v1/wallpaper/album",
          data:this.params
        }).then(res=>{
          //console.log(res)
          if (this.banner.length===0) {
            this.banner=res.res.banner
          }
          if (res.res.album.length===0) {
            this.hasMore=false
            uni.showToast({
              title:"没有数据了",
              icon:"none"
            })
            return
          }
          this.album=[...this.album,...res.res.album]
        })
      }
    },
  }
</script>

<style lang="scss" scoped>
.album_scroll{
  height: calc(100vh - 36px);
}
.swiper{
  swiper{
    height: calc(750rpx / 2.3);
    image{
      height: 100%;
    }
  }
}
.list {
  padding: 10rpx;
  .item {
    padding: 10rpx 0; 
    display: flex;
    border-bottom: 1rpx solid #ccc;
    .item_img {
      flex: 1;
      padding: 10rpx;
      image {
        width: 200rpx;
        height: 200rpx;
      }
    }

    .item_info {
      flex: 2;
      padding: 0 10rpx;
      overflow: hidden;
      .name {
        font-size: 30rpx;
        color: #000;
        padding: 10rpx 0;
      }

      .desc {
        padding: 10rpx 0;
        font-size: 24rpx;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }

      .bth {
        padding: 10rpx;
        display: flex;
        justify-content: flex-end;
        .attention {
          color: $color;
          border: 1rpx solid $color;
          padding: 10rpx;
        }
      }
    }
  }
}
</style>